<template>
	<view style="height: 100%;">
		<view class="top_prompt" v-if="this.islogin">{{toptitle}}</view>
		<!-- 游客登录 -->
		<view class="bzhy_adv" :style="this.isYouke()?'':'display:none'" v-if="!baseConfig.isIOSshenhe">
			<view class="bzhy_bg"></view>
			<view class="bzhy_ktrs">
				<text style="margin-right: 30rpx;">——</text> <text class="color-yellow">37.8</text>万人已开通 <text style="margin-left: 30rpx;">——</text>
			</view>
			<view class="bzhy_biaoyu">
				开通VIP会员，尊享<text class="color-yellow">8</text>重权益
			</view>
			<view class="bzhy_ljkt" @click="lijikaitong">
				立即开通
			</view>
		</view>
		<!-- 高级会员 -->
		<!-- <view class="bzhy_adv" id="gaojihuiyuan">
			<view class="bzhy_bg"></view>
			<view class="bzhy_ktrs">
				<text style="margin-right: 30rpx;">——</text> <text class="color-yellow">37.8</text>万人已开通 <text style="margin-left: 30rpx;">——</text>
			</view>
			<view class="bzhy_biaoyu">
				开通高级会员，尊享<text class="color-yellow">10</text>重权益
			</view>
			<view class="bzhy_ljkt">
				立即开通
			</view>
		</view> -->

		<view class="huiyuan-wrapper">
			<view class="wrapper-title">
				<image src="../../../static/img/huiyuan/zstq.jpg"></image>
			</view>
			<view class="infor_quanyi" v-for="(item, index) in items" :key="index">
				<view class="quanyi_title">
					<view class="quanyi_titleL">
						<view class="section-head-line"></view>{{item.title}}
					</view>
					<view class="quanyi_titleR" style="color: #cccccc;" @tap="lijikaitong">开通更多地区权限 ></view>
				</view>
				<view class="diqu_cells" v-for="(item2, index2) in item.other2" :key="index2">
					<view class="diqu_cell_list">
						<view class="locationtext">
							<image src="../../../static/img/huiyuan/locationicon.png" class="locationicon"></image>
							{{item2.diqu}}
						</view>
						<view class="daoqi-data">{{item2.daoqi}}到期</view>
						<view class="daoqi-reult" v-if="(item2.ispc==0||(item2.ispc==1&&item2.hytype<=3))" @tap="kaitong(item2,'xufei')">续费</view>
						<view class="daoqi-reult" v-if="item2.shengji==1" @tap="kaitong(item2,'shengji')">升级</view>
					</view>
				</view>
			</view>
			<view class="infor_quanyi">
				<view class="quanyi_title">
					<view class="quanyi_titleL">信息权益</view>
				</view>
				<view class="quanyi_cells">
					<view v-bind:class="[quanyi.isAllow ? 'quanyi_cell_list_on' : 'quanyi_cell_list', 'errorClass']" v-for="(quanyi,index) in quanyilists"
					 :key='index'>
						<image :src="quanyi.qyimg" class="defult-img"></image>
						<image :src="quanyi.qyimgon" class="img-on"></image>
						<text>{{quanyi.qytitle}}</text>
					</view>
				</view>
			</view>
			<view class="infor_quanyi quanyi2">
				<view class="quanyi_title">
					<view class="quanyi_titleL">会员权益</view>
				</view>
				<view class="quanyi_cells">
					<view class="xinxi_cell_list">
						<image src="../../../static/img/huiyuan/huiyuan_40.png" style="width: 94rpx;"></image>
						<text>甲方联系方式 一键获取</text>
					</view>
					<view class="xinxi_cell_list">
						<image src="../../../static/img/huiyuan/huiyuan_43.png" style="width: 79rpx;"></image>
						<text>更多定制功能 优先体验</text>
					</view>
					<view class="xinxi_cell_list">
						<image src="../../../static/img/huiyuan/huiyuan_46.png" style="width: 91rpx;"></image>
						<text>每日更新 6.5万条商机</text>
					</view>
				</view>
			</view>
		</view>
		<view class="lijikaitong" :style="{paddingBottom:isios ? '30rpx' : '20rpx'}" @tap="lijikaitong" v-if="!baseConfig.isIOSshenhe">立即开通</view>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/huiyuan-tabControl.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				isios:false,
				items: [],
				CurrentUser: this.currUser,
				islogin: false,
				current: 0,
				toptitle: '',
				quanxiantype: 1,
				isAllow: false,
				quanyilists: [{
						qytitle: '招标信息服务',
						qyimg: '/static/img/huiyuan/zhaobiao.png',
						qyimgon: '/static/img/huiyuan/zhaobiao_on.png',
						isAllow: true
					},
					{
						qytitle: '政府审批项目',
						qyimg: '/static/img/huiyuan/zhengfu.png',
						qyimgon: '/static/img/huiyuan/zhengfu_on.png',
						isAllow: true
					},
					{
						qytitle: '土地挂牌出让',
						qyimg: '/static/img/huiyuan/tudi.png',
						qyimgon: '/static/img/huiyuan/tudi_on.png',
						isAllow: true
					},
					{
						qytitle: '售后秘书服务',
						qyimg: '/static/img/huiyuan/shouhou.png',
						qyimgon: '/static/img/huiyuan/shouhou_on.png',
						isAllow: true
					},
					{
						qytitle: '招标个性定制',
						qyimg: '/static/img/huiyuan/dingzhi.png',
						qyimgon: '/static/img/huiyuan/dingzhi_on.png',
						isAllow: true
					},
					{
						qytitle: '邮件提醒',
						qyimg: '/static/img/huiyuan/youjian.png',
						qyimgon: '/static/img/huiyuan/youjian_on.png',
						isAllow: true
					},
					{
						qytitle: '专属人工服务',
						qyimg: '/static/img/huiyuan/kefu.png',
						qyimgon: '/static/img/huiyuan/kefu_on.png',
						isAllow: true
					},
					{
						qytitle: '微信信息推送',
						qyimg: '/static/img/huiyuan/tuisong.png',
						qyimgon: '/static/img/huiyuan/tuisong_on.png',
						isAllow: true
					},
					{
						qytitle: '拟在建项目',
						qyimg: '/static/img/huiyuan/nizaijian.png',
						qyimgon: '/static/img/huiyuan/nizaijian_on.png'
					}
				]
			}
		},
		onLoad() {
			this.checkLogin(1);
			this.islogin = this.currUser.islogin;
			// if (this.currUser.islogin)
			// 	this.binddata();
			
			if(uni.getSystemInfoSync().platform === 'ios'){
				this.isios=true;
			}

		},
		onShow() {
			this.checkLogin(1);
			this.islogin = this.currUser.islogin;
			if (this.currUser.islogin)
				this.binddata();
		},
		methods: {
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/user/goumaijilu/goumaijilu'
				})
			},
			binddata() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 8089;
				uni.request({
					url: this.baseConfig.serverURL + 'user/wodehuiyuan/huiyuanHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2.list;
								this.items = list;
								this.toptitle = res.data.other2.toptitle;
								this.quanxiantype = res.data.retbs;

							}
						} else {
							uni.showToast({
								title: '获取数据失败',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取数据失败！',
							icon: "none"
						});
					}
				})

			},
			lijikaitong() {
				uni.navigateTo({
					url: '/pages/user/huiyuan/payment'
				})
			},
			kaitong(item, type) {
				var reurl = "";
				var pages = getCurrentPages();
				var curPage = pages[pages.length - 1].route; // 当前页面路径
				console.log(curPage);
				var url = curPage.replace(/\?/g, "$").replace(/&/g, "^").replace(/=/g, "@");
				console.log(url)
				if (type == 'xufei') {
					uni.navigateTo({
						url: '/pages/user/huiyuan/payment?ispc=' + item.ispc + '&isxufei=1&diqu=' + item.diqu + '&type=' + item.hytype +
							'&reurl=' + url
					})
				} else if (type = 'shengji') {
					uni.navigateTo({
						url: '/pages/user/huiyuan/payment?ispc=' + item.ispc + '&isshengji=' + item.shengji + '&diqu=' + item.diqu +
							'&type=' + item.hytype + '&reurl=' + url
					})
				}

			},
			onClickItem(val) {
				this.current = val.currentIndex;
			},
			scollSwiper(e) {
				this.current = e.target.current
			},
			isYouke() {
				return !this.islogin || this.quanxiantype == 1;
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.top_prompt {
		color: #2660cd;
		font-size: 28rpx;
		background-color: #fafaf8;
		padding: 20rpx 0;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.bzhy_adv {
		margin: 0 30rpx;
		height: 350rpx;
		background-color: #2660cd;
		border-radius: 20rpx;
		position: relative;

		.bzhy_bg {
			background: url(../../../static/img/huiyuan/huiyuan_03.png) no-repeat;
			background-size: 100% 100%;
			width: 182rpx;
			height: 168rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 0;
		}

		.gaoji_bgtop {
			background: url(../../../static/img/huiyuan/gaojibg.png) no-repeat;
			background-size: 100% 100%;
			width: 105rpx;
			height: 97rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.gaoji_bgbottom {
			background: url(../../../static/img/huiyuan/gaojibg.png) no-repeat;
			background-size: 100% 100%;
			width: 105rpx;
			height: 97rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: -1;
			transform: rotate(180deg);
		}

		.bzhy_ktrs {
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			font-weight: 700;
			padding-top: 40rpx;
		}

		.color-yellow {
			color: #ffe75e;
		}

		.bzhy_biaoyu {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #fff;
			margin: 40rpx 0;
		}

		.bzhy_ljkt {
			width: 75%;
			margin: 0 auto;
			background-image: linear-gradient(to bottom, #f38e2f, #feb32b);
			padding: 15rpx 0;
			border-radius: 50rpx;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			position: absolute;
			left: 12%;
		}
	}

	.huiyuan-wrapper {
		margin-top: 40rpx;

		.wrapper-title {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			image {
				width: 332rpx;
				height: 36rpx;
			}
		}
	}

	.infor_quanyi {
		margin-top: 30rpx;

		.quanyi_title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0 30rpx;

			.section-head-line {
				width: 8rpx;
				height: 35rpx;
				background-color: #2d67e0;
				border-radius: 5rpx;
				margin-right: 15rpx;
			}

			.quanyi_titleL {
				display: flex;
				align-items: center;
				font-size: 32rpx;
			}

			.quanyi_titleR {
				color: #5e5b5c;
				font-size: 28rpx;
			}
		}
	}

	.quanyi_cells {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 30rpx 30rpx 0;

		.quanyi_cell_list {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			width: 25%;

			.defult-img {
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto 10rpx;
			}

			.img-on {
				display: none;
			}

			text {
				font-size: 28rpx;
				text-align: center;
			}
		}

		.quanyi_cell_list_on {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			width: 25%;

			.img-on {
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto 10rpx;
				display: block;
			}

			.defult-img {

				display: none;
			}

			text {
				font-size: 28rpx;
				text-align: center;
			}
		}
	}

	.quanyi2 {
		padding-bottom: 100rpx;
	}

	.xinxi_cell_list {
		border: 1px solid #6fbcff;
		border-radius: 10rpx;
		padding: 30rpx 25rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 10rpx;
		flex: 1 1 0%;
		justify-content: center;
		align-items: flex-start;

		image {
			height: 94rpx;
			margin: 0 auto 10rpx;
		}

		text {
			color: #2660cd;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.lijikaitong {
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: #fd6a3f;
		padding: 20rpx 0;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		width: 100%;
	}

	.diqu_cells {
		margin: 30rpx;

		.diqu_cell_list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border: 1px solid #6fbcff;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			color: #2660cd;
			font-size: 30rpx;
			margin-bottom: 30rpx;
			position: relative;

			.locationicon {
				width: 38rpx;
				height: 46rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}

			.daoqi-reult {
				background-image: linear-gradient(to right, #e85a25, #ed7b32);
				color: #fff;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-radius: 40rpx;
			}

			.daoqi-reult-red {
				color: #fd392d;
			}

			.shuiyin {
				width: 96rpx;
				height: 93rpx;
				position: absolute;
				right: 0;
				top: -20rpx;
			}
		}
	}
</style>
